<template>
	<view class="container">
		<!-- 	<cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">地图轨迹</block>
		</cu-custom> -->
		<map class="map_container" show-location show-compass enable-traffic :longitude="longitude" :latitude="latitude"
			:scale="11" :markers="covers" :polyline="polyline"></map>
		<view class="tui-order-header">
			<view class="tui-text">订单编号： <text class="tui-bold">{{orderSn}}</text> </view>
			<view class="tui-text">承运人：小马哥速运同城</view>
		</view>
		<view class="tui-order-tracking">
			<tui-time-axis>
				<tui-timeaxis-item backgroundColor="transparent" v-if="detail.status == 4">
					<template v-slot:node>
						<view class="tui-node">
							<tui-icon name="check" color="#fff" :size="14" :bold="true"></tui-icon>
						</view>
					</template>
					<template v-slot:content >
						<view>
							<view class="tui-order-title">已送达</view>
							<view class="tui-order-desc">您的订单已由本人签收。感谢您使用小马哥速运同城，欢迎再次光临。</view>
							<view class="tui-order-time tui-gray">{{detail.finishTime}}</view>
						</view>
					</template>
				</tui-timeaxis-item>

				<tui-timeaxis-item backgroundColor="transparent">
					<template v-slot:node>
						<view class="tui-node" :style="{backgroundColor:backgroundColor}">
							<tui-icon name="transport" color="#fff" :size="13"></tui-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="tui-order-title tui-gray">运输中</view>
						<view class="tui-order-desc tui-light-gray tui-ptop">
							您的订单由{{detail.sendAddr}}送往{{detail.receiveAddr}}</view>
					</template>
				</tui-timeaxis-item>
				<tui-timeaxis-item backgroundColor="transparent">
					<template v-slot:node>
						<view class="tui-node">
							<tui-icon name="order" color="#fff" :size="12"></tui-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="tui-order-title tui-gray">已下单</view>
						<view class="tui-order-desc tui-light-gray">您的订单将派单，准备送出</view>
						<view class="tui-order-time tui-gray">{{detail.createTime}}</view>
					</template>
				</tui-timeaxis-item>
			</tui-time-axis>
		</view>
	</view>
</template>


<script>
	import {
		queryCoordinate
	} from '@/api/index.js'
	export default {
		onLoad(data) {
			this.orderSn = data.orderSn
			let adss = uni.getStorageSync('locationNow')
			this.longitude = adss.lng
			this.latitude = adss.lat
			this.getData()

		},
		onReady() {
			this.map = uni.createMapContext('map');
			// 获取屏幕高度（此处获取屏幕高度是因为本示例中使用了colorui的cu-custom自定义头部，需根据系统高度来自适应）
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
		},
		mounted() {
			// this.setNavTop('.navBox')

			// this.polyline = [{
			// 	points: this.coordinate,
			// 	color: '#025ADD',
			// 	width: 4,
			// 	dottedLine: false,
			// }];
		},
		data() {
			return {
				orderSn: '',
				backgroundColor: "#5677fc",
				windowHeight: 0,
				map: null,
				movementInterval: null, // 用于存储定时器的引用
				windowHeight: 0,
				mapHeight: 0,
				timer: null,
				isDisabled: false,
				isStart: false,
				playIndex: 1,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 10,
				longitude: 0,
				polyline: [],
				covers: {},
				// 坐标数据
				coordinate: [],
				customIcon: '../../ststic/car.png',
				detail: {}
			}
		},
		methods: {
			setNavTop(style) {
				let view = uni.createSelectorQuery().select(style);
				view
					.boundingClientRect((data) => {
						console.log(data);
						console.log("tabInList基本信息 = " + data.height);
						this.mapHeight = this.windowHeight - data.height;
						console.log(this.mapHeight);
					})
					.exec();
			},

			pause() {
				this.isStart = false;
				this.isDisabled = false;
				if (this.movementInterval) {
					clearInterval(this.movementInterval);
					this.movementInterval = null;
				}
			},
			getData(orderSn) {
				console.log(this.latitude, this.longitude);
				queryCoordinate({
						orderSn: this.orderSn
					}, 'get')
					.then((res) => {
						this.detail = res.data
						this.covers = [{
							id: 1,
							width: 42,
							height: 47,
							rotate: 270,
							latitude: Number(res.data.freightDriverlat),
							longitude: Number(res.data.freightDriverlgt),
							iconPath: '../../ststic/car.png',
							callout: {
								content: '111', // <img src="车牌信息" alt="" width="50%" />
								display: "BYCLICK",
								fontWeight: "bold",
								color: "#5A7BEE", //文本颜色
								fontSize: "12px",
								bgColor: "#ffffff", //背景色
								padding: 5, //文本边缘留白
								textAlign: "center",
							},
							anchor: {
								x: 0.5,
								y: 0.5,
							},
						}]
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// height: env(safe-area-inset-bottom);
	}

	.map_container {
		width: 100%;
		height: 500px;
	}

	.tui-order-header {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-text {
		font-size: 28rpx;
		color: #333;
		padding: 4rpx;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-node {
		height: 44rpx;
		width: 44rpx;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
	}

	.tui-node-dot {
		height: 16rpx;
		width: 16rpx;
		background-color: #ddd;
		border-radius: 50%;
		/* transform: translateY(45%); */
		margin-top: 6rpx;
	}

	.tui-bg-primary {
		background: #EB0909 !important;
	}

	.tui-order-tracking {
		padding: 30rpx 30rpx 30rpx 40rpx;
		background: #fff;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.tui-order-title {
		padding-bottom: 12rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.tui-order-desc {
		padding-bottom: 12rpx;
		font-size: 28rpx;
		color: #333;
	}

	.tui-ptop {
		display: flex;
		justify-content: flex-start;
		line-height: 28rpx;
	}

	.tui-order-time {
		font-size: 24rpx;
		font-weight: bold;
	}

	.tui-gray {
		color: #848484 !important;
	}

	.tui-light-gray {
		color: #888 !important;
	}

	.tui-primary {
		color: #5677fc;
	}
</style>